<template>
  <div class="basic-config">
    <div class="config-header">
      <h3>基本配置</h3>
    </div>
    
    <div class="config-content">
      <!-- 生成数据量 -->
      <div class="config-item">
        <label class="config-label">生成数据量：{{ dataCount }} 条</label>
        <el-slider
          v-model="dataCount"
          :max="100000"
          :min="1000"
          :step="1000"
          :show-tooltip="false"
          @change="handleDataCountChange"
        />
      </div>
      
      <!-- 生成模式 -->
      <div class="config-item">
        <label class="config-label">生成模式</label>
        <el-radio-group v-model="generationMode" @change="handleModeChange">
          <el-radio value="online">在线生成</el-radio>
          <el-radio value="offline">离线下载</el-radio>
        </el-radio-group>
      </div>
      
      <!-- 数据源 -->
      <div class="config-item">
        <label class="config-label">数据源</label>
        <div class="upload-area">
          <div class="upload-icon">
            <el-icon size="48" color="#409eff"><Upload /></el-icon>
          </div>
          <div class="upload-text">
            <p>拖放SQL文件到此处或点击上传</p>
            <p class="upload-hint">支持导入.sql文件自动解析表结构</p>
          </div>
          <el-button type="primary" plain>选择文件</el-button>
        </div>
      </div>
      
      <!-- 数据存储 -->
      <div class="config-item">
        <label class="config-label">数据存储</label>
        <label class="config-sub-label">保存期限</label>
        <el-select 
          v-model="storageSpace" 
          placeholder="请选择保存期限"
          @change="handleStorageChange"
        >
          <el-option label="7天（免费用户）" value="7天（免费用户）" />
          <el-option label="30天（VIP用户）" value="30天（VIP用户）" />
          <el-option label="永久（企业用户）" value="永久（企业用户）" />
        </el-select>
      </div>
      
      <!-- 文件格式 -->
      <div class="config-item">
        <label class="config-label">文件格式</label>
        <el-select 
          v-model="fileFormat" 
          placeholder="请选择文件格式"
          @change="handleFormatChange"
        >
          <el-option label="CSV格式" value="CSV格式" />
          <el-option label="JSON格式" value="JSON格式" />
          <el-option label="XML格式" value="XML格式" />
          <el-option label="SQL格式" value="SQL格式" />
        </el-select>
      </div>
    </div>
  </div>
</template>

<script>
import { computed } from 'vue'
import { useStore } from 'vuex'
import { Upload } from '@element-plus/icons-vue'

export default {
  name: 'BasicConfig',
  components: {
    Upload
  },
  setup() {
    const store = useStore()
    
    const dataCount = computed({
      get: () => store.state.dataCount,
      set: (value) => store.dispatch('updateDataCount', value)
    })
    
    const generationMode = computed({
      get: () => store.state.generationMode,
      set: (value) => store.dispatch('updateGenerationMode', value)
    })
    
    const storageSpace = computed({
      get: () => store.state.storageSpace,
      set: (value) => store.dispatch('updateStorageSpace', value)
    })
    
    const fileFormat = computed({
      get: () => store.state.fileFormat,
      set: (value) => store.dispatch('updateFileFormat', value)
    })
    
    const handleDataCountChange = (value) => {
      store.dispatch('updateDataCount', value)
    }
    
    const handleModeChange = (value) => {
      store.dispatch('updateGenerationMode', value)
    }
    
    const handleStorageChange = (value) => {
      store.dispatch('updateStorageSpace', value)
    }
    
    const handleFormatChange = (value) => {
      store.dispatch('updateFileFormat', value)
    }
    
    return {
      dataCount,
      generationMode,
      storageSpace,
      fileFormat,
      handleDataCountChange,
      handleModeChange,
      handleStorageChange,
      handleFormatChange
    }
  }
}
</script>

<style scoped>
.basic-config {
  flex: 0 0 400px;
  background: #fff;
  border-radius: 8px;
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.1);
  display: flex;
  flex-direction: column;
  max-height: calc(100vh - 200px);
  overflow: hidden;
}

.config-header {
  padding: 20px 24px 16px;
  border-bottom: 1px solid #f0f0f0;
  flex-shrink: 0;
}

.config-header h3 {
  margin: 0;
  font-size: 16px;
  font-weight: 600;
  color: #333;
}

.config-content {
  padding: 24px;
  flex: 1;
  overflow-y: auto;
}

.config-item {
  margin-bottom: 24px;
}

.config-item:last-child {
  margin-bottom: 0;
}

.config-label {
  display: block;
  margin-bottom: 12px;
  font-size: 14px;
  font-weight: 500;
  color: #333;
}

.config-sub-label {
  display: block;
  margin-bottom: 8px;
  font-size: 13px;
  color: #666;
}

.upload-area {
  border: 2px dashed #d9d9d9;
  border-radius: 8px;
  padding: 32px 24px;
  text-align: center;
  background: #fafafa;
  transition: border-color 0.3s;
}

.upload-area:hover {
  border-color: #409eff;
}

.upload-icon {
  margin-bottom: 16px;
}

.upload-text {
  margin-bottom: 16px;
}

.upload-text p {
  margin: 0 0 4px;
  color: #333;
  font-size: 14px;
}

.upload-hint {
  color: #999 !important;
  font-size: 12px !important;
}

:deep(.el-slider) {
  margin: 12px 0;
}

:deep(.el-radio-group) {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

:deep(.el-select) {
  width: 100%;
}

/* 响应式设计 */
@media (max-width: 1200px) {
  .basic-config {
    flex: none;
    max-height: none;
  }
}

@media (max-width: 768px) {
  .basic-config {
    margin: 0;
  }
  
  .config-content {
    padding: 16px;
  }
  
  .upload-area {
    padding: 24px 16px;
  }
}
</style>